<script lang="ts" setup>
import type { TableColumnType } from '@/components/SyTable/index'
import { getByLoginUserInfoApi } from '@/api/system/user'
import { Download, Edit, View } from '@element-plus/icons-vue'
import Details from './details.vue'

const selectionList = $ref<string[]>([])
const tableRef = $ref<SyTableInstance>()

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    type: 'sort',
    label: '排序',
    prop: 'sort',
    width: 100,
    align: 'center',
  },
  {
    label: 'id',
    prop: 'id',
    width: 200,
  },
  {
    label: '姓名',
    align: 'center',
    prop: 'name',
    width: 300,
  },
  {
    label: '性别',
    prop: 'sex',
    align: 'center',
    type: 'dict',
    dictType: 'user_sex',
    width: 300,
  },
  {
    label: '年龄',
    prop: 'age',
    align: 'center',
    width: 300,
  },
  {
    label: '地址',
    prop: 'address',
    type: 'slot',
    align: 'center',
    width: 300,
  },
  {
    label: '角色',
    prop: 'role',
    type: 'tag',
    width: 300,
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    width: 300,
    type: 'slot',
    fixed: 'right',
  },
]
let data = $ref<any[]>([])
let loading = $ref(false)
onMounted(() => {
  setTimeout(() => {
    loading = true
    data = [
      { id: 1, name: '张三', sex: '1', age: 18, address: '北京', role: [], idCard: '1234', phone: '1234' },
      { id: 2, name: '李四', sex: '0', age: 18, address: '北京', role: ['经理', '运维'] },
      { id: 3, name: '王五', sex: '1', age: 25, address: '上海', role: ['销售'] },
      { id: 4, name: '赵六', sex: '0', age: 30, address: '广州', role: ['设计师'] },
      { id: 5, name: '孙七', sex: '1', age: 22, address: '深圳', role: ['程序员'] },
      { id: 6, name: '周八', sex: '0', age: 27, address: '成都', role: ['市场'] },
      { id: 7, name: '吴九', sex: '1', age: 29, address: '重庆', role: ['HR'] },
      { id: 8, name: '郑十', sex: '0', age: 24, address: '杭州', role: ['客服'] },
      { id: 9, name: '冯十一', sex: '1', age: 33, address: '南京', role: ['研发'] },
      { id: 10, name: '陈十二', sex: '0', age: 26, address: '武汉', role: ['产品经理'] },
      { id: 11, name: '褚十三', sex: '1', age: 28, address: '西安', role: ['测试'] },
      { id: 12, name: '卫十四', sex: '0', age: 35, address: '天津', role: ['财务'] },
      { id: 13, name: '蒋十五', sex: '1', age: 20, address: '苏州', role: [] },
      { id: 14, name: '沈十六', sex: '0', age: 21, address: '厦门', role: ['运营'] },
      { id: 15, name: '韩十七', sex: '1', age: 32, address: '长沙', role: ['技术总监'] },
      { id: 16, name: '杨十八', sex: '0', age: 23, address: '青岛', role: ['编辑'] },
      { id: 17, name: '朱十九', sex: '1', age: 28, address: '大连', role: ['法务'] },
      { id: 18, name: '秦二十', sex: '0', age: 31, address: '宁波', role: ['采购'] },
      { id: 19, name: '尤二十一', sex: '1', age: 27, address: '无锡', role: ['分析师'] },
      { id: 20, name: '许二十二', sex: '0', age: 29, address: '福州', role: ['品牌'] },
    ]
  }, 500)
})

function paginationChange(pageNum: number, pageSize: number) {
  console.log(pageNum, pageSize)
}

const detailsRef = $ref<InstanceType<typeof Details>>()

async function openDialog() {
  if (!detailsRef)
    return
  const res = await detailsRef?.showDialog()

  console.log(res)
}

const ruleFormRef = ref<FormInstance>()

let formInline = $ref<{
  user?: string
  name?: string
  sex?: string
}>({
  user: '',
  name: '',
})

const rules = reactive<FormRules<any>>({
  name: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' },
  ],
})

function search() {
  ruleFormRef.value?.validate((validate) => {
    if (!validate)
      return
    Message({
      message: '搜索',
      type: 'success',
    })
  })
}
function reset() {
  Message({
    message: '重置',
    type: 'warning',
  })
  formInline = {}
}

onMounted(() => {
  getByLoginUserInfoApi().then((res) => {
    console.log(res)
  })
})
</script>

<template>
  <div
    un-flex="~ col"
    un-h="full"
  >
    <el-card un-m-b="2.5">
      <el-form
        ref="ruleFormRef"
        :inline="true"
        :model="formInline"
        :rules="rules"
        un-grid="~ cols-4"
        class="single-row-search-form"
      >
        <el-form-item label="用户名">
          <el-input v-model="formInline.user" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input v-model="formInline.name" placeholder="请输入昵称" clearable />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <sy-dict
            v-model="formInline.sex"
            dict-type="gruop"
            placeholder="请选择性别"
            type="select"
          />
        </el-form-item>
        <el-form-item>
          <sy-search-button @search="search" @reset="reset" />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card
      un-h-full
      body-style="height: 100%;"
    >
      <sy-table
        ref="tableRef"
        v-model:selection="selectionList"
        row-key="id"
        height="100%"
        selection-chenge-use="all"
        table-column-type="selection"
        :loading
        :columns="columns"
        :data="data"
        :fixed="true"
        border
        @paging-change="paginationChange"
        @click-add="openDialog"
      >
        <template #header="{ size }">
          <el-button
            :size="size"
            type="primary"
            plain
          >
            <template #icon>
              <el-icon><Download /></el-icon>
            </template>
            导出用户
          </el-button>
        </template>
        <template #address="{ row }">
          {{ row.address }}
        </template>
        <template #operation>
          <el-button link type="primary">
            <template #icon>
              <el-icon><View /></el-icon>
            </template>
            查看
          </el-button>
          <el-button link type="primary">
            <template #icon>
              <el-icon><Edit /></el-icon>
            </template>
            编辑
          </el-button>
        </template>
      </sy-table>
    </el-card>
    <Details ref="detailsRef" />
  </div>
</template>

<style scoped>

</style>
